<template>
	<div
		class="relative h-screen bg-white xl:bg-zinc-200 xl:dark:bg-zinc-800 text-center"
	>
		<div
			class="w-[100%] absolute xl:left-1/2 xl:translate-x-[-50%] xl:py-4 px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:mt-8 xl:rounded-sm xl:shadow-lg"
		>
			<h3
				class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300"
			>
				账号登录
			</h3>

			<vee-form @submit="onLoginHandler">
				<vee-field
					type="text"
					name="username"
					placeholder="用户名"
					autocomplete="on"
					class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-none outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
					:rules="validateUsername"
					v-model="loginForm.username"
				/>
				<div class="relative">
					<vee-error-message
						class="block text-sm text-red-600 mt-0.5 text-left"
						name="username"
					/>
				</div>
				<vee-field
					type="password"
					name="password"
					placeholder="密码"
					autocomplete="on"
					class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-none outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
					:rules="validatePassword"
					v-model="loginForm.password"
				/>
				<div class="relative">
					<vee-error-message
						class="block text-sm text-red-600 mt-0.5 text-left"
						name="password"
					/>
				</div>
				<div class="pt-1 pb-3 leading-[0px] text-right">
					<a
						@click="onToReg"
						class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer"
						>去注册</a
					>
				</div>

				<m-button
					:isActiveAnim="false"
					class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
					:loading="loading"
					>登录</m-button
				>
			</vee-form>

			<!-- 第三方登录 -->
			<div class="flex justify-around m-4">
				<qq-login></qq-login>
				<weixin-login></weixin-login>
			</div>
		</div>
		<slider-captcha-vue
			v-if="isSliderCaptchaVisible"
			@close="isSliderCaptchaVisible = false"
			@success="onCaptchaSuccess"
		></slider-captcha-vue>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import {
	Form as VeeForm,
	Field as VeeField,
	ErrorMessage as VeeErrorMessage,
} from 'vee-validate'

import { validateUsername, validatePassword } from '../validate'
import SliderCaptchaVue from './slider-captcha.vue'

import { LOGIN_TYPE_USERNAME } from '@/constants/index'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

import qqLogin from './qq-login.vue'
import weixinLogin from './weixin-login.vue'

const loading = ref(false)
const isSliderCaptchaVisible = ref(false)

const onLoginHandler = () => {
	isSliderCaptchaVisible.value = true
}

const onCaptchaSuccess = () => {
	isSliderCaptchaVisible.value = false
	onLogin()
}

const router = useRouter()
const store = useStore()
const loginForm = ref({
	username: 'lixuan',
	password: '111111',
})
const onLogin = async () => {
	loading.value = true

	try {
		await store.dispatch('user/login', {
			...loginForm.value,
			loginType: LOGIN_TYPE_USERNAME,
		})
		router.push('/')
	} finally {
		loading.value = false
	}
}

const onToReg = () => {
	store.commit('app/changeRouteType', 'push')
	router.push('/register')
}
</script>

<style scoped lang="scss"></style>
